<script setup>
import { ref } from 'vue';

/*
  ref: 让数据具备响应式
  其实 ref 函数就是通过 proxy 代理帮我们实现响应式数据的方法
  可以将数据代理为  ref(100) --> proxy({value: 100})
  后期使用的时候要 count.value 才能拿到我们的值
  在模板中使用 count 的时候无需 .value ，会自动调用 get 方法获取到值
*/

// 在组合式API中直接定义的状态是不具备响应式
// 如果要想让其具备响应式可以借助一个叫 ref 的函数
// let count = 100

let count = ref(100)


function addCount () {
  count.value++
  console.log('被点击了', count);

}
</script>

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="addCount">点击增加</button>
  </div>
</template>

